<template>
  <div class="performance-evaluation">
    <div class="page-header">
      <h1>模型性能评估</h1>
      <p>评估和分析AI模型的性能指标</p>
    </div>

    <div class="evaluation-content">
      <!-- 评估概览 -->
      <div class="evaluation-overview">
        <div class="overview-card">
          <h3>📊 评估指标</h3>
          <div class="metrics-grid">
            <div class="metric-item">
              <div class="metric-value">94.7%</div>
              <div class="metric-label">准确率</div>
            </div>
            <div class="metric-item">
              <div class="metric-value">92.3%</div>
              <div class="metric-label">精确率</div>
            </div>
            <div class="metric-item">
              <div class="metric-value">95.1%</div>
              <div class="metric-label">召回率</div>
            </div>
            <div class="metric-item">
              <div class="metric-value">93.7%</div>
              <div class="metric-label">F1分数</div>
            </div>
          </div>
        </div>

        <div class="overview-card">
          <h3>🎯 模型排名</h3>
          <div class="model-ranking">
            <div class="rank-item">
              <span class="rank-number">1</span>
              <span class="model-name">文本检测模型 v2.1</span>
              <span class="model-score">96.2%</span>
            </div>
            <div class="rank-item">
              <span class="rank-number">2</span>
              <span class="model-name">图像分析模型 v1.8</span>
              <span class="model-score">94.7%</span>
            </div>
            <div class="rank-item">
              <span class="rank-number">3</span>
              <span class="model-name">音频识别模型 v1.5</span>
              <span class="model-score">92.3%</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 详细评估 -->
      <div class="detailed-evaluation">
        <!-- 性能趋势图 - 全宽度 -->
        <div class="evaluation-section chart-section">
          <h3>📈 性能趋势</h3>
          <div class="trend-chart">
            <div ref="performanceChart" class="chart-container"></div>
          </div>
        </div>

        <!-- 下方的两个部分 -->
        <div class="evaluation-row">
          <div class="evaluation-section">
            <h3>🔍 混淆矩阵</h3>
            <div class="confusion-matrix">
              <table>
                <tr>
                  <th></th>
                  <th>预测正类</th>
                  <th>预测负类</th>
                </tr>
                <tr>
                  <th>实际正类</th>
                  <td>1,234</td>
                  <td>65</td>
                </tr>
                <tr>
                  <th>实际负类</th>
                  <td>89</td>
                  <td>2,156</td>
                </tr>
              </table>
            </div>
          </div>

          <div class="evaluation-section">
            <h3>📋 评估报告</h3>
            <div class="evaluation-reports">
              <div class="report-item">
                <h4>模型稳定性分析</h4>
                <p>模型在不同数据集上表现稳定，方差小于0.02</p>
              </div>
              <div class="report-item">
                <h4>性能瓶颈识别</h4>
                <p>在处理复杂图像时准确率有所下降，建议增加训练数据</p>
              </div>
              <div class="report-item">
                <h4>改进建议</h4>
                <p>建议调整学习率和批次大小，预计可提升2-3%准确率</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'PerformanceEvaluation',
  data() {
    return {
      chartInstance: null,
      performanceData: []
    }
  },
  mounted() {
    this.generateMockData()
    this.initChart()
  },
  beforeUnmount() {
    if (this.chartInstance) {
      this.chartInstance.dispose()
    }
  },
  methods: {
    generateMockData() {
      // 生成30天的模拟数据
      const data = []
      const today = new Date()
      
      // 基准值
      const baseAccuracy = 94.5
      const basePrecision = 92.8
      const baseRecall = 95.2
      const baseF1Score = 93.9
      
      for (let i = 29; i >= 0; i--) {
        const date = new Date(today)
        date.setDate(date.getDate() - i)
        
        // 模拟准确率数据（94.5% ± 1.5% 之间波动）
        const accuracy = baseAccuracy + (Math.random() - 0.5) * 3
        // 模拟精确率数据（92.8% ± 1.2% 之间波动）
        const precision = basePrecision + (Math.random() - 0.5) * 2.4
        // 模拟召回率数据（95.2% ± 1.3% 之间波动）
        const recall = baseRecall + (Math.random() - 0.5) * 2.6
        // 模拟F1分数（93.9% ± 1.1% 之间波动）
        const f1Score = baseF1Score + (Math.random() - 0.5) * 2.2
        
        data.push({
          date: date.toISOString().split('T')[0],
          accuracy: parseFloat(Math.max(91, Math.min(97, accuracy)).toFixed(2)),
          precision: parseFloat(Math.max(89, Math.min(96, precision)).toFixed(2)),
          recall: parseFloat(Math.max(92, Math.min(98, recall)).toFixed(2)),
          f1Score: parseFloat(Math.max(91, Math.min(96, f1Score)).toFixed(2))
        })
      }
      
      this.performanceData = data
    },
    
    initChart() {
      if (!this.$refs.performanceChart) return
      
      this.chartInstance = echarts.init(this.$refs.performanceChart)
      
      const option = {
        title: {
          text: '模型性能趋势',
          left: 'center',
          textStyle: {
            color: '#2c3e50',
            fontSize: 16,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          },
          formatter: (params) => {
            let content = `<div style="font-weight: bold; margin-bottom: 5px;">${params[0].axisValue}</div>`
            params.forEach((param, index) => {
              content += `<div style="margin: 2px 0;">${param.marker} ${param.seriesName}: ${param.value}%</div>`
            })
            return content
          }
        },
        legend: {
          data: ['准确率', '精确率', '召回率', 'F1分数'],
          bottom: 10,
          textStyle: {
            color: '#2c3e50'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.performanceData.map(item => item.date),
          axisLabel: {
            color: '#7f8c8d',
            formatter: (value) => {
              const date = new Date(value)
              return `${date.getMonth() + 1}/${date.getDate()}`
            }
          },
          axisLine: {
            lineStyle: {
              color: '#bdc3c7'
            }
          }
        },
        yAxis: {
          type: 'value',
          min: 80,
          max: 100,
          axisLabel: {
            color: '#7f8c8d',
            formatter: '{value}%'
          },
          axisLine: {
            lineStyle: {
              color: '#bdc3c7'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#ecf0f1'
            }
          }
        },
        series: [
          {
            name: '准确率',
            type: 'line',
            data: this.performanceData.map(item => item.accuracy),
            lineStyle: {
              color: '#3498db',
              width: 2
            },
            itemStyle: {
              color: '#3498db'
            },
            symbol: 'circle',
            symbolSize: 4,
            smooth: true
          },
          {
            name: '精确率',
            type: 'line',
            data: this.performanceData.map(item => item.precision),
            lineStyle: {
              color: '#e74c3c',
              width: 2
            },
            itemStyle: {
              color: '#e74c3c'
            },
            symbol: 'circle',
            symbolSize: 4,
            smooth: true
          },
          {
            name: '召回率',
            type: 'line',
            data: this.performanceData.map(item => item.recall),
            lineStyle: {
              color: '#27ae60',
              width: 2
            },
            itemStyle: {
              color: '#27ae60'
            },
            symbol: 'circle',
            symbolSize: 4,
            smooth: true
          },
          {
            name: 'F1分数',
            type: 'line',
            data: this.performanceData.map(item => item.f1Score),
            lineStyle: {
              color: '#f39c12',
              width: 2
            },
            itemStyle: {
              color: '#f39c12'
            },
            symbol: 'circle',
            symbolSize: 4,
            smooth: true
          }
        ]
      }
      
      this.chartInstance.setOption(option)
      
      // 响应式调整
      window.addEventListener('resize', () => {
        if (this.chartInstance) {
          this.chartInstance.resize()
        }
      })
    }
  }
}
</script>

<style scoped>
.performance-evaluation {
  padding: 20px;
}

.page-header {
  margin-bottom: 30px;
}

.page-header h1 {
  font-size: 28px;
  color: #2c3e50;
  margin: 0 0 10px 0;
}

.page-header p {
  color: #7f8c8d;
  margin: 0;
}

.evaluation-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.evaluation-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.overview-card {
  background: white;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.overview-card h3 {
  margin: 0 0 20px 0;
  color: #2c3e50;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.metric-item {
  text-align: center;
}

.metric-value {
  font-size: 24px;
  font-weight: bold;
  color: #3498db;
  margin-bottom: 5px;
}

.metric-label {
  font-size: 14px;
  color: #7f8c8d;
}

.model-ranking {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.rank-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 8px;
}

.rank-number {
  width: 30px;
  height: 30px;
  background: #3498db;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.model-name {
  flex: 1;
  font-weight: 500;
}

.model-score {
  font-weight: bold;
  color: #27ae60;
}

.detailed-evaluation {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.evaluation-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.chart-section {
  width: 100%;
}

.evaluation-section {
  background: white;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.evaluation-section h3 {
  margin: 0 0 20px 0;
  color: #2c3e50;
}

.chart-container {
  height: 400px;
  width: 100%;
  border-radius: 8px;
}

.confusion-matrix table {
  width: 100%;
  border-collapse: collapse;
}

.confusion-matrix th,
.confusion-matrix td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: center;
}

.confusion-matrix th {
  background: #f8f9fa;
  font-weight: bold;
}

.evaluation-reports {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.report-item {
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #3498db;
}

.report-item h4 {
  margin: 0 0 8px 0;
  color: #2c3e50;
}

.report-item p {
  margin: 0;
  color: #7f8c8d;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .evaluation-overview {
    grid-template-columns: 1fr;
  }
  
  .evaluation-row {
    grid-template-columns: 1fr;
  }
  
  .chart-container {
    height: 300px;
  }
  
  .metrics-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .performance-evaluation {
    padding: 10px;
  }
  
  .chart-container {
    height: 250px;
  }
  
  .overview-card,
  .evaluation-section {
    padding: 15px;
  }
}
</style> 